<template>
    <div id='find'>
        <SearchHeader :header='Header'></SearchHeader>
		<div class="mt40">
			<div class="mb40">
				<div :class="isFixed == true?' isFixed':''">
				<mt-navbar v-model="selected" >
					<mt-tab-item id="1">景点攻略</mt-tab-item>
					<mt-tab-item id="2">优质美食</mt-tab-item>
					<mt-tab-item id="3">优选交通</mt-tab-item>
				</mt-navbar>
				</div>
				<mt-tab-container v-model="selected" >
					<mt-tab-container-item id="1">
						<div class="row bg2">
							<div class="col-6 mt10" v-for="(item,index) in Strategy1" :key="index">
								<div class="card" style="height:210px" >
									<img :src="item.imgs" class="card-img-top" alt="Card image cap" height="100px" @click="mainmsg1(index)">
									<div class="card-body">
										<h6 class="card-title lue_1 title1">{{item.title}}</h6>
										<p class="card-text lue_2 text1">{{item.content}}</p>
									</div>
								</div>
							</div>
						</div>
					</mt-tab-container-item>
					<mt-tab-container-item id="2">
						<div class="row bg2">
							<div class="col-6 mt10" v-for="(item,index) in Strategy2" :key="index">
								<div class="card" style="height:210px" >
									<img :src="item.imgs" class="card-img-top" alt="Card image cap" height="100px" @click="mainmsg2(index)">
									<div class="card-body">
										<h6 class="card-title lue_2 title1">{{item.title}}</h6>
										<p class="card-text lue_2 text1">{{item.content}}</p>
									</div>
								</div>
							</div>
						</div>
					</mt-tab-container-item>
					<mt-tab-container-item id="3">
						<div class="row bg2">
							<div class="col-6 mt10" v-for="(item,index) in Strategy3" :key="index">
								<div class="card" style="height:210px">
									<img :src="item.imgs" class="card-img-top"  alt="Card image cap" height="100px" @click="mainmsg3(index)">
									<div class="card-body">
										<h6 class="card-title lue_2 title1">{{item.title}}</h6>
										<p class="card-text lue_2 text1">{{item.content}}</p>
									</div>
								</div>
							</div>
						</div>
					</mt-tab-container-item>
				</mt-tab-container>
			</div>
			
		</div>
		<!-- 底部Nav -->
    	<Tab :tab1="homeTab1" :tab2="homeTab2" :tab3="homeTab3" :tab4="homeTab4"></Tab>
    </div>
</template>
<script>
import Tab from "@/components/Tab/Tab.vue";
import SearchHeader from "../../components/Header/SearchHeader.vue";
import { Navbar, TabItem } from "mint-ui";
import CommonProvider from "@/providers/CommonProvider";
export default {
  name: "find",
  data() {
    return {
      homeTab1: "首页",
      homeTab2: "发现",
      homeTab3: "排行榜",
      homeTab4: "中心",
      Header: "发现",
      selected: "1",
      Strategy1: [],
      Strategy2: [],
      Strategy3: [],
      isFixed: false
    };
  },
  components: {
    SearchHeader,
    Tab
  },
  mounted: function() {
    this.Find(), 
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    Find() {
      let data0 = {
        role: 0
      };
      let data1 = {
        role: 1
      };
      let data2 = {
        role: 2
      };
      let self = this;
      CommonProvider.Find(data0).then(res => {
        self.Strategy1 = res.data;
        //console.log(res.data);
      });
      CommonProvider.Find(data1).then(res => {
        self.Strategy2 = res.data;
        //console.log(res.data);
      });
      CommonProvider.Find(data2).then(res => {
        self.Strategy3 = res.data;
        //console.log(res.data);
      });
    },
    mainmsg1(index) {
      window.localStorage.setItem("main_ID", this.Strategy1[index]._id);
      this.$router.push("/details");
    },
    mainmsg2(index) {
      window.localStorage.setItem("main_ID", this.Strategy2[index]._id);
      this.$router.push("/details");
    },
    mainmsg3(index) {
      window.localStorage.setItem("main_ID", this.Strategy3[index]._id);
      this.$router.push("/details");
    },
    handleScroll() {
      this.$nextTick(() => {
        let scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        let headerTop = document.getElementById("header");
        if (scrollTop > 1) {
          this.isFixed = true;
        } else {
          this.isFixed = false;
        }
      });
    }
  }
};
</script>
<style lang='scss' scoped>
.card{
  width: 111%;
  margin-left: -10px
}
.title1 {
  font-family: "黑体";
  font-weight: bold;
}
.text1 {
  font-size: 14px;
}
.isFixed {
  position: fixed;
  top: 40px;
  z-index: 4;
  width: 100%;
}
</style>
